<template>
  <div class="presenalnfo">
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>头像:</span>
            </div>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:3000/admin/uploadUserIcon"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                <img v-if="userInfo.icon" :src="userInfo.icon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>昵称:</span>
            </div>
            <el-input v-model="userInfo.username"></el-input>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>姓名:</span>
            </div>
            <el-input v-model="userInfo.name"></el-input>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>年龄:</span>
            </div>
            <el-input v-model="userInfo.age"></el-input>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>性别:</span>
            </div>
            <el-radio-group v-model="userInfo.sex">
              <el-radio-button label="0">女</el-radio-button>
              <el-radio-button label="1">男</el-radio-button>
            </el-radio-group>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>QQ:</span>
            </div>
            <el-input v-model="userInfo.qq"></el-input>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>微信:</span>
            </div>
            <el-input v-model="userInfo.weixin"></el-input>
    </el-card>
    <el-card shadow="hover" class="m-b-15">
            <div slot="header">
              <span>电话:</span>
            </div>
            <el-input v-model="userInfo.phone"></el-input>
    </el-card>
    <el-button @click="saveInfo" class="W100">保存信息</el-button>
  </div>
</template>

<script>
  export default {
    created() {
      this.getPresenalInfo()
    },
    data() {
      return {
        userInfo: {
          username: '',
          icon: '',
          age: 0,
          name: '',
          qq: '',
          weixin: '',
          sex: 0,
          phone: ''
        },
        imageUrl: '',
        isEdit: false
      }
    },
    methods: {
      getPresenalInfo() {
        this.api.get('/admin/getUserInfoById', {
          params: {
            id: localStorage.id
          }
        }).then(res => {
          if (res.code == 0) {
            this.userInfo = res.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      saveInfo() {
        this.isEdit = false
        console.log(this.userInfo)
        this.api.post('/admin/editUserInfoById', this.userInfo)
          .then(res => {
            if (res.code == 0) {
              this.getPresenalInfo()
              this.$message({
                message: res.message,
                type: 'success'
              })
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleAvatarSuccess(res, file) {
        this.userInfo.icon = res.data.address
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      }
    },
  }
</script>

<style lang="scss">
.presenalnfo {
  .avatar-uploader {
    .el-upload {
      border-radius: 5px;
      border:1px dotted rgb(10, 11, 12);
      &:hover {
       border:1px dotted #409EFF;
      }
    }
  }.el-upload:never {
    border:1px dotted #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

}
</style>